<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="ruleForm"
				:model="queryData"
				label-width="100px"
				label-suffix=":"
				:inline="true"
			>
				<el-form-item :label="`${$t('common.belong_merchant')}`">
					<merchant-select
						v-model="queryData.merchantId"
						v-symbols
					></merchant-select>
				</el-form-item>
				<el-form-item :label="`会员账号`">
					<el-input
						v-model.trim="queryData.userName"
						v-input="{ name: 'symbols' }"
						clearable
						:placeholder="`${$t('common.please_enter')}`"
					></el-input>
				</el-form-item>
				<el-form-item :label="`操作人`">
					<el-input
						v-model.trim="queryData.createdBy"
						v-input="{ name: 'symbols' }"
						clearable
						:placeholder="`${$t('common.please_enter')}`"
					></el-input>
				</el-form-item>
				<el-form-item label="操作时间">
					<el-date-picker
						:clearable="true"
						v-model="operateTime"
						size="medium"
						:picker-options="pickerShortcut2"
						format="yyyy-MM-dd HH:mm:ss"
						type="datetimerange"
						range-separator="-"
						:start-placeholder="$t('common.start_time')"
						:end-placeholder="$t('common.end_time')"
						align="right"
						value-format="timestamp"
						style="width: 360px"
						:default-time="defaultTime"
					></el-date-picker>
				</el-form-item>
				<el-form-item :label="`状态`">
					<el-select
						v-model="queryData.status"
						clearable
						:placeholder="`${$t('common.select_all')}`"
						style="width:220px"
					>
						<el-option
							v-for="item in statusNameArr"
							:key="item.code"
							:label="item.description"
							:value="item.code"
						></el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						:loading="loading"
						size="medium"
						@click="handleSearch"
					>
						{{ $t('dxn.card_ables_list.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-right"
						size="medium"
						@click="reset"
					>
						{{ $t('dxn.card_ables_list.reset') }}
					</el-button>
					<el-button
						v-if="hasPermission('90900051')"
						type="warning"
						icon="el-icon-download"
						size="medium"
						:loading="exportBtnLoading"
						@click="exportExcel"
					>
						{{ $t('dxn.card_ables_list.export_excel') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<el-table
				ref="refTable"
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				size="mini"
				class="small-size-table"
				border
				:data="list"
				style="width: 100%"
				:max-height="tableHeight"
				:header-cell-style="getRowClass"
				highlight-current-row
				header-align="center"
			>
				<el-table-column
					type="index"
					label="序号"
					width="80"
					align="center"
				/>
				<el-table-column
					label="所属商户"
					min-width="120"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.merchantName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					label="会员帐号"
					min-width="130"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.userName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					label="会员昵称"
					min-width="130"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.nickName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					label="设备标识"
					min-width="270"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.deviceNo || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					label="总代账号"
					min-width="130"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.topProxyName || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					label="操作人"
					min-width="130"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.createdBy || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					label="操作时间"
					min-width="160"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.createdAt || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					:label="`操作备注`"
					align="center"
					min-width="180"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.remark || '-' }}
					</template>
				</el-table-column>
				<el-table-column
					label="状态"
					min-width="120"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{
							getTypeName(scope.row.status, statusNameArr) || '-'
						}}
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				v-show="!!total"
				class="pageValue"
				:current-page.sync="pageNum"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="$store.getters.pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			></el-pagination>
		</template>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import MainContent from '@/components/MainContent/index.vue'

export default {
	components: {
		MainContent
	},
	mixins: [list],
	data() {
		return {
			loading: false,
			list: [],
			exportBtnLoading: false,
			tableHeight: 480,
			otherDependenComponents: ['wrap'],
			operateTime: [],
			queryData: {
				merchantId: '',
				status: '',
				userName: '',
				createdBy: ''
			},
			statusNameArr: [
				{
					code: 0,
					description: '处理中'
				},
				{
					code: 1,
					description: '上传成功'
				},
				{
					code: 2,
					description: '上传失败'
				}
			]
		}
	},
	methods: {
		getCurrentParams() {
			const operateTime = this.operateTime || []
			const params = {
				...this.queryData,
				startTime: operateTime[0]
					? dayjs(operateTime[0]).format('YYYY-MM-DD HH:mm:ss')
					: undefined,
				endTime: operateTime[1]
					? dayjs(operateTime[1]).format('YYYY-MM-DD HH:mm:ss')
					: undefined
			}
			return params
		},
		loadData() {
			const params = this.getParams(this.getCurrentParams())
			this.loading = true
			this.list = []
			this.$api
				.getUserUploadLogsListBend(params)
				.then((res) => {
					this.loading = false
					const { record = [], totalRecord } = res.data || {}
					this.list = record
					this.total = totalRecord || 0
				})
				.catch(() => {
					this.loading = false
				})
		},
		handleSearch() {
			this.pageNum = 1
			this.loadData()
		},
		reset() {
			Object.keys(this.queryData).forEach((key) => {
				if (Array.isArray(this.queryData[key])) {
					this.queryData[key] = []
				} else {
					this.queryData[key] = undefined
				}
			})
			this.operateTime = []
			this.pageNum = 1
			this.loadData()
		},
		exportExcel() {
			const params = this.getParams(this.getCurrentParams())
			params.pageSize = undefined
			params.pageNum = undefined
			this.exportBtnLoading = true
			this.exportExcelPublic({
				api: 'exportUserUploadLogsListBend',
				params
			}).finally(() => {
				this.exportBtnLoading = false
			})
		}
	}
}
</script>
<style lang="scss" scoped>
.text-click {
	color: #409eff;
	cursor: pointer;
}
.action-button {
	min-width: 30px !important;
}
</style>
